﻿<%@ Language="C#" Inherits="System.Web.Mvc.ViewPage<DNBProject.Model.ReportPartial.ReportModel>" %>
<style type="text/css">
    fieldset legend {
        display: block;
    }
    
   #dropDownMaterial label {
        display: inline;
        margin-left: 10px
    }
</style>
<div>
    <form id="form1">
        <center>
            
            <!--Configuration partial-->
            <table border="0" style="width: 45%; height: 500px; float: left; margin-right:15px; margin-top:0px">
               <tr>
                    <td style="width: 100%; height: 465px;" valign="top">
                        <table border="0" cellpadding="1" cellspacing="1" class="table_001" style="height: 420px">
                            <tr>
                                <td colspan="4" style="width: 100%; height: 246px" valign="top">
                                    <fieldset>
                                        <legend class="group_001">Bảng lựa chọn</legend>
                                        <form>
                                            <table border="0" cellpadding="1" cellspacing="1">
                                               <tr>
                                                    <td style="width: 100%" valign="top">
                                                        <fieldset style="width: 96%; height: auto; margin-bottom:10px">
                                                            <legend>Chọn mẫu</legend>
                                                            <div style="overflow:auto; height:100px">
                                                                <%:Html.Partial("ReportPartial/SelectSampleSubPartial", Model.Samples)%>
                                                            </div>
                                                        </fieldset>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 100%;" valign="top">
                                                        <fieldset style="width: 96%; height: auto; margin-bottom:10px">
                                                            <legend>Chọn trạm</legend>
                                                            <div style="overflow:auto; height:100px">
                                                                <%:Html.Partial("ReportPartial/SelectAreaSubPartial", Model.Areas) %>
                                                            </div>
                                                        </fieldset>
                                                    </td>
                                                </tr>
                                                <tr>
                                                     <td style="width: 100%" valign="top">
                                                          <fieldset style="width: 96%; height: auto; margin-bottom:10px">
                                                                <legend>Chọn tiêu chuẩn thống kê</legend>
                                                                <div id="dropDownMaterial" style="height:25px">
                                                                    <select id="selectMaterial" multiple="multiple">
	                                                                    <option>Chọn tất cả</option>
                                                                        <%
                                                                          foreach (var item in Model.Materials)
                                                                          {%>
                                                                              <option value="<%:item.Id %>" class = "<%:item.AreaId%>"><%:item.ToString()%></option>
                                                                        <%} %>
	                                                                </select>
                                                                </div>
                                                           </fieldset>
                                                     </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" style="width: 100%; height: 12px">
                                                        <fieldset style="width: 96%; height: auto; margin-bottom:10px">
                                                            <legend>Chọn tiêu chí thống kê</legend>
                                                            <div>
                                                                <div style=" margin-bottom: 10px;">
                                                                    Tiêu chuẩn:
                                                                    <select id="selectedStandards" style="width: 65%; margin-left: 10px">
                                                                        <% foreach (var tc in Model.TieuChuan)
                                                                            {%>
                                                                            <option value="<%:tc.Id %>"><%:tc.Name %></option>
                                                                        <%} %>
                                                                    </select>
                                                                </div>
                                                                <div style=" margin-bottom: 10px;">
                                                                    <div style="width: 50%; float:left">
                                                                        Thời gian bắt đầu: 
                                                                        <input type="text" id="beginDateTimePicker" readonly="true" style="width: 120px"/>
                                                                    </div>
                                                                    <div style="width: 50%; float:left">
                                                                        Thời gian kết thúc: 
                                                                        <input type="text" id="endDateTimePicker" readonly="true" style="width: 120px"/>
                                                                    </div>
                                                                </div>
                                                                <div style="width: 530px; height: 150px; overflow:scroll; margin-bottom: 10px;">
                                                                    <table>
                                                                        <tr>
                                                                            <th style="text-align: left; min-width: 120px" class="table_header1">Theo thời gian</th>
                                                                            <th style="text-align: left; min-width: 120px" class="table_header1">Theo giá trị</th>
                                                                            <th style="text-align: left; min-width: 140px" class="table_header1">Dạng series</th>
                                                                            <th style="text-align: left; min-width: 120px" class="table_header1"></th>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="table_header1">
                                                                                <div style="text-align: left">
                                                                                    <input type="radio" name="selectTime" value="1" style="width: 20px; margin-bottom: 20px" checked="checked"/>Tháng
                                                                                </div>
                                                                                <div style="text-align: left">
                                                                                    <input type="radio" name="selectTime" value="2" style="width: 20px"/>Năm
                                                                                </div>
                                                                            </td>
                                                                            <td class="table_header1">
                                                                                <div style="text-align: left">
                                                                                    <input type="radio" name="selectAgg" value="1" style="width: 20px; margin-bottom: 10px" checked="checked"/>Trung bình
                                                                                </div>
                                                                                <div style="text-align: left">
                                                                                    <input type="radio" name="selectAgg" value="2" style="width: 20px; margin-bottom: 10px"/>Max
                                                                                </div>
                                                                                <div style="text-align: left">
                                                                                    <input type="radio" name="selectAgg" value="3" style="width: 20px; margin-bottom: 10px"/>Min
                                                                                </div>
                                                                                <div style="text-align: left">
                                                                                    <input type="radio" name="selectAgg" value="4" style="width: 20px;"/>Tổng
                                                                                </div>
                                                                            </td>
                                                                            <td class="table_header1">
                                                                                <div style="text-align: left">
                                                                                    <input type="radio" name="selectSeries" value="1" style="width: 20px; margin-bottom: 10px" checked="checked"/>Theo từng vị trí đo
                                                                                </div>
                                                                                <div style="text-align: left">
                                                                                    <input type="radio" name="selectSeries" value="2" style="width: 20px; margin-bottom: 10px"/>Theo thông số đo
                                                                                </div>
                                                                                <div style="text-align: left">
                                                                                    <input type="radio" name="selectSeries" value="3" style="width: 20px;"/>Theo thời gian
                                                                                </div>
                                                                            </td>
                                                                            <td style="text-align: left" class="table_header1">
                                                                                <div>
                                                                                    <input type="checkbox" value="1" style="width: 20px; margin-bottom: 20px" checked="checked">Độ lệch chuẩn</input>
                                                                                </div>
                                                                                <div>
                                                                                    <input type="checkbox" value="2" style="width: 20px;" checked="checked">Phần trăm</input>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                   </table>
                                                                </div>
                                                            </div>
                                                        </fieldset>
                                                    </td>
                                                </tr>
                                            </table>
                                        </form>
                                    </fieldset>
                                    <br />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            <!--Show result partial-->
            <table border="0" style="width: 45%; height: 500px; float: left">
                <tr>
                    <td style="width: 100%;">
                        <fieldset style="width: 100%; min-height: 250px">
                            <legend>Số liệu</legend>
                            <div style="width: 100%; min-height: 220px">
                                
                            </div>
                        </fieldset>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100%;">
                        <fieldset style="width: 100%; min-height: 250px">
                            <legend>Đồ thị</legend>
                            <div style="width: 100%; min-height: 220px">
                                
                            </div>
                        </fieldset>
                    </td>
                </tr>
                <tr>
                    <td>
                       <center>
                            <button id="btnViewReport" style="margin-top: 30px">Xem báo cáo</button>
                       </center>
                    </td>
                </tr>
            </table>
        </center>
    </form>
</div>